<template>
  <div id="main" class="mainWarningDetail">
    <swiper autoplay indicator-dots>
      <block v-for="(item, index) in earlyWarning" :key="index">
        <swiper-item>
          <div
            class="rowBox"
            :class="{
              blueBox: item.level == '蓝色',
              orangeBox: item.level == '橙色',
              redBox: item.level == '红色',
              blackBox: item.level == '黑色',
              yellowBox: item.level == '黄色'
            }"
          >
            <div class="row">
              <div class="title">
                <span>{{ item.level }}</span>
                <span>{{ item.name }}</span>
                <span>预警</span>
              </div>
              <div class="time">
                <span class="gray">发布时间：{{ item.pub_time }}</span>
                <span class="gray">最后更新：{{ item.update_time ? item.update_time : item.pub_time }}</span>
              </div>
              <rich-text :nodes="item.icon"></rich-text>
              <!-- <i class="alifont white-light">{{ weatherIcon }}</i> -->
              <!-- <i class="alifont white-light">&#xe6a7;</i> -->
              <div class="detail">
                <span class="gray-drak">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </swiper-item>
      </block>
      <block v-if="earlyWarning.length == 0">
        <div class="no gray-drak">暂无预警</div>
      </block>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ossUrl: this.$store.state.oss,
      earlyWarning: []
    };
  },
  onLoad() {
    this.getWarning();
  },
  methods: {
    // 获取天气预警
    getWarning() {
      let that = this;
      const db = wx.cloud.database();
      db.collection('earlyWarning')
        .get()
        .then((res) => {
          let data = res.data;
          // data = [
          //   {
          //     content: '广州市气象局于09月01日17时28分发布雷雨大风蓝色预警信号，请注意防御。',
          //     infoid: 70,
          //     level: '蓝色',
          //     name: '雷雨大风',
          //     pub_time: '2016-09-01 17:46:06',
          //     title: '广东省广州市气象台发布蓝色雷雨大风预警',
          //     type: '雷雨大风蓝色'
          //   }
          // ];
          for (const item in data) {
            data[item].icon = this.selectIcon(data[item].name);
          }
          that.earlyWarning = data;
          console.log('res', res);
          console.log('this.earlyWarning', that.earlyWarning);
        })
        .catch((err) => {
          console.error('earlyWarning', err);
        });
    },
    // 根据天气出ICON
    selectIcon(val) {
      let icon = '<i class="alifont white-light">';
      if (val == '暴雨') icon += '&#xe6a7;';
      else if (val == '雷雨大风') icon += '&#xe693;';
      else if (val == '降温') icon += '&#xe6ae;';
      else if (val == '高温') icon += '&#xe689;';
      else if (val == '大雾') icon += '&#xe6ad;';
      else if (val == '霜冻') icon += '&#xe6af;';
      else if (val == '雷电') icon += '&#xe691;';
      else if (val == '大风') icon += '&#xe6aa;';
      else if (val == '森林火险') icon += '&#xe84c;';
      else if (val == '寒潮') icon += '&#xe6aa;';
      else icon += '&#xe833;';
      icon += '</i>';
      return icon;
    }
  }
};
</script>

<style lang="less">
.mainWarningDetail {
  .blueBox {
    .row {
      box-shadow: 0rpx 0rpx 30rpx 2rpx #2b84f0;
    }
    .title {
      span {
        color: #2b84f0;
      }
    }
    .alifont {
      color: #2b84f0;
    }
  }
  .orangeBox {
    .row {
      box-shadow: 0rpx 0rpx 30rpx 2rpx #ff8400;
    }
    .title {
      span {
        color: #ff8400;
      }
    }
    .alifont {
      color: #ff8400;
    }
  }
  .redBox {
    .row {
      box-shadow: 0rpx 0rpx 30rpx 2rpx #fa3a3a;
    }
    .title {
      span {
        color: #fa3a3a;
      }
    }
    .alifont {
      color: #fa3a3a;
    }
  }
  .blackBox {
    .row {
      box-shadow: 0rpx 0rpx 30rpx 2rpx #3e3e3e;
    }
    .title {
      span {
        color: #3e3e3e;
      }
    }
    .alifont {
      color: #3e3e3e;
    }
  }
  .yellowBox {
    .row {
      box-shadow: 0rpx 0rpx 30rpx 2rpx #e6b700;
    }
    .title {
      span {
        color: #e6b700;
      }
    }
    .alifont {
      color: #e6b700;
    }
  }
  swiper {
    padding: 0 0 3vh;
    height: 97vh;
    width: 100%;
  }
  .rowBox {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-top: 30rpx;
    .row {
      height: 90%;
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      border-radius: 34rpx;
      padding: 100rpx 80rpx;
      background-color: #ffffff;
    }
  }
  .title {
    margin-bottom: 40rpx;
    span:first-child {
      padding-right: 10rpx;
    }
    span {
      font-size: 38rpx;
      font-weight: bold;
    }
  }
  .time {
    span {
      font-size: 24rpx;
      display: block;
    }
  }
  .img {
    flex-grow: 1;
    width: 80%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 20rpx;
  }
  .alifont {
    display: block;
    font-size: 350rpx;
    font-weight: lighter;
    height: 350rpx;
    margin: 140rpx 0;
  }
  .detail {
    text-indent: 60rpx;
    span {
      font-size: 28rpx;
    }
  }
}
</style>
